import mixinMap from '@/mixin/map';
import { Polygon } from '@/assets/map.js';

import { mapState, mapMutations } from 'vuex';

let assMap = require('@/assets/icon/aim.png');

export default {
  name: 'MapComponent',
  mixins: [mixinMap],
  data() {
    return {
      arrPoint: [],
      arrPolygon: [],
      assMap: assMap,
      status: 0,

      // 0：默认地图模式，
      // 1：店面点模式，
      // 2：区块模式+低倍镜，
      // 3：区块模式+高倍镜，子店面模式，
      // 4：
      // _status: '',
      mapStyle: 0,
      mode: '店面模式',
    };
  },
  computed: {
    ...mapState(['cusInfo']),
    opts地图模式: function() {
      // 'amap://styles/normal', //标准
      // 'amap://styles/dark', // 幻影黑
      // 'amap://styles/light', //月光银
      // 'amap://styles/whitesmoke', //远山黛
      // 'amap://styles/fresh', //草色青
      // 'amap://styles/grey', //雅士灰
      // 'amap://styles/graffiti', //涂鸦
      // 'amap://styles/macaron', //马卡龙
      // 'amap://styles/blue', //靛青蓝
      // 'amap://styles/darkblue', //极夜蓝
      // 'amap://styles/wine', //酱籽
      return [
        { label: '店面模式', style: 'amap://styles/normal' },
        { label: '寻宝模式', style: 'amap://styles/blue' },
      ];
    },
    playerImage: function() {
      return this.cusInfo.playerImage;
    },
    当前地图缩放比: function() {
      if (this.map) {
        return this.map.getZoom();
      } else {
        return 0;
      }
    },
    comPoint: function() {
      return this.arrPoint.map((p) => {
        let icon = new AMap.Icon({
          image: this.playerImage,
          imageSize: new AMap.Size(24, 24),
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(p.lng, p.lat),
          title: p.name,
          // content: p.name,
          label: {
            // content: `${p.name}`,
          },
          offset: new AMap.Pixel(-12, -12),
          icon: icon,
        });
        return marker;
      });
    },
    comPolygon: function() {
      let MAP = this.map;
      return this.arrPolygon.map((item) => {
        console.log(
          '%c [ item ]-60',
          'font-size:13px; background:pink; color:#bf2c9f;',
          item
        );
        let polygon = new AMap.Polygon({
          path: item.path,
          strokeColor: '#FF33FF',
          strokeOpacity: 0.6,
          strokeWeight: 3,
          fillColor: '#1791fc',
          fillOpacity: 0.6,
          zIndex: 5,
        });
        let a = item.getRectByPolygon(MAP);
        console.log(
          '%c [ a ]-75',
          'font-size:13px; background:pink; color:#bf2c9f;',
          a
        );
        let icon = new AMap.Icon({
          image: item.icon,
          imageSize: new AMap.Size(24, 24),
          // imageSize: new AMap.Size(a.width, a.height),
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(a.lng, a.lat),
          offset: [12, 12],
          // content: p.name,
          label: {
            // content: `${p.name}`,
          },
          icon: icon,
          zIndex: 3,
        });
        return {
          polygon: polygon,
          marker: marker,
        };
      });
    },
  },
  methods: {
    test: function(a, b) {
      console.log(a, b);
    },
    切换地图模式: function(mode) {
      let zoom = this.map.getZoom();
      if (mode == '店面模式') {
        this.map.setMapStyle('amap://styles/normal');
      }
      if (mode == '寻宝模式') {
        this.map.setMapStyle('amap://styles/blue');
      }
    },
    setMapStyle: function() {
      let styles = [
        // 'amap://styles/normal', //标准
        'amap://styles/dark', // 幻影黑
        'amap://styles/light', //月光银
        'amap://styles/whitesmoke', //远山黛
        'amap://styles/fresh', //草色青
        'amap://styles/grey', //雅士灰
        'amap://styles/graffiti', //涂鸦
        'amap://styles/macaron', //马卡龙
        'amap://styles/blue', //靛青蓝
        'amap://styles/darkblue', //极夜蓝
        'amap://styles/wine', //酱籽
      ];
      let style = styles[this.mapStyle % styles.length];
      this.mapStyle = this.mapStyle + 1;
      this.map.setMapStyle(style);
    },
    clearMap: function() {
      this.map.clearMap();
      // this.arrPoint.splice(0,this.arrPoint.length)
      // this.arrPolygon.splice(0,this.arrPolygon.length)
    },

    ajaxData: function() {},
    绘制点: function() {
      this.map.clearMap();
      // this._status = '店面点模式';
      let arr = this.comPoint;
      arr.forEach((p) => {
        this.map.add(p);
        p.on('click', () => {
          this.$router.push({
            path: '/goodsList',
            query: {},
          });
        });
      });
    },
    绘制区块: function() {
      this.map.clearMap();
      let arr = this.comPolygon;
      let zoom = this.map.getZoom();
      console.log(
        '%c [ zoom ]-119',
        'font-size:13px; background:pink; color:#bf2c9f;',
        zoom
      );
      if (zoom > 16) {
        arr.forEach((item) => {
          // this.map.add(item.marker);
          this.map.add(item.polygon);
        });
      } else {
        arr.forEach((item) => {
          this.map.add(item.marker);
          // this.map.add(item.polygon);
        });
      }

      // marker.on('click', (e) => {
      //   console.log(e);
      //   var bounds = polygon.getBounds();
      //   this.map.setBounds(bounds, true); // 第二个参数true表示是否平滑动画

      //   // 可能需要在这个动作上做状态改变，进入寻宝状态
      //   // 加载藏宝区域
      //   // 执行检测寻宝动作
      //   this.$router.push({
      //     path: '/YSJmap',
      //     query: {},
      //   });
      // });
    },

    绘制区块内: function() {},
    ajaxPoint: function() {
      return this.$api
        .fetch店面列表()
        .then((res) => {
          console.log(res);
          if (res.code == 200 && res.data) {
            let tar = this.arrPoint;
            tar.splice(0, tar.length);
            tar.push(...res.data);
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    ajaxPolygon: function() {
      return this.$api
        .fetch区块列表()
        .then((res) => {
          console.log(res);
          if (res.code == 200 && res.data) {
            let tar = this.arrPolygon;
            tar.splice(0, tar.length);
            res.data.forEach((item) => {
              let polygon = new Polygon({
                path: item.path,
                icon: item.icon,
              });
              tar.push(polygon);
            });
            return Promise.resolve(res);
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    ajaxArea: function() {
      return this.$api
        .fetch店面子集by区块()
        .then((res) => {
          if (res.code == 200 && res.data) {
            let tar = this.arrPolygon;
            tar.splice(0, tar.length);
            res.data.forEach((item) => {
              let polygon = new Polygon({
                path: item.path,
                icon: item.icon,
              });
              tar.push(polygon);
            });
            return Promise.resolve(res);
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    switchPoint: function() {},
    switchPolygon: function() {},
    handle店面: function() {},
    handle店面2: function() {},
    handle店面3: function() {},

    handle放大: function() {},

    店面点跳转对应的店面: function() {},
    区块跳转区块对应的虚拟地图: function() {},
    从虚拟地图返回地图并进入寻宝模式: function() {
      // 从虚拟地图返回实际地图
      // 从虚拟地图的店面id => 店面info => 实际地图对应位置
      // 状态机：定义寻宝模式
      this.map.setCenter();
      this.map.setZoom();
    },
    退出寻宝模式: function() {
      // if（寻宝模式）{ 退出寻宝模式 }
      this.map.setCenter();
      this.map.setZoom();
    },

    进入寻宝模式: function() {
      this.ajaxPolygon().then(() => {
        this.绘制区块();
      });
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.进入寻宝模式();
    this.initAMap().then((map) => {
      map.on('zoomend', (e) => {
        if (this.map.getZoom < 15) {
          this.切换地图模式('退出可能的寻宝模式');
        }
      });
    });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
